import React, { useState } from "react";
import {
  AppBar, Toolbar, Typography, Box, IconButton, InputBase, Badge, Drawer,
  List, ListItemButton, ListItemIcon, ListItemText, Collapse, CssBaseline,
  Paper, Breadcrumbs, Link
} from "@mui/material";

import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import NotificationsIcon from "@mui/icons-material/Notifications";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import SettingsIcon from "@mui/icons-material/Settings";
import AssessmentIcon from "@mui/icons-material/Assessment";
import DataUsageIcon from "@mui/icons-material/DataUsage";
import PeopleIcon from "@mui/icons-material/People";
import GroupIcon from "@mui/icons-material/Group";

import RadarChart from "./components/RadarChart";
import IndustryModelEditor from "./pages/IndustryModelEditor";
import ModelMantain from "./pages/ModelMantain"
import DataSourceConfigPage from "./pages/DataSourceControl";
import InteligenceEvaluation from "./pages/InteligenceEvaluation"
import ExpertEvaluation from "./pages/ExpertEvaluation"
import SelfEvaluation from "./pages/selfAssessment"
import ProjectMgr from "./pages/ProjectMgr"
import UserMgr from "./pages/UserMgr"
import SurveyStatistics from "./pages/SurveyStatistic";
import AlertCenter from "./pages/AlertCenter"
import LeaderDashBoard from "./pages/LeadershipCockpitDashboard"
import KnowledgeManagement from "./pages/KnowledgeMgr";
import EnterpriseEvaluation from "./pages/EnterpriseEvaluation"
import TargetManagementPage from "./pages/TargetSetting";
import EvaluationReview from "./pages/EvaluationReview"



import AccountMenu from "./components/AccountMenu"


const drawerWidth = 260;

const titleMap: Record<string, string> = {
  "model-editor": "模型管理",
  "model-mantain": "企业定制模型维护",
  "data-source-control": "评估数据采集",
  "survey-feedback": "问卷调查与反馈",
  "inteligence-evaluation": "智能评估",
  "alert-center":"预警中心",
  "self-evaluation":"干系人自评",
  "expert-evaluation":"专家评估",
  "enterprise-evaluation":"企业总评",
  "project-mgr":"重点工程与项目管理",
  "leader-dashboard":"领导驾驶舱",
  "knowledge-lib-mgr":"知识库管理"
};


const menuData = [
  {
   label: "模型管理",
    icon: <SettingsIcon />,
    page: "model-editor",
    children: [
      { label: "企业定制模型维护", page: "model-mantain" },
      { label: "智能化目标设定", page: "target-setting" },
     
    ],
  },
  { label: "评估数据采集", icon: <DataUsageIcon />, page:"data-source-control" ,
     children: [
      { label: "问卷调查与反馈", page: "survey-feedback" },
       { label: "评估审核与归档", page: "evaluation-review" },
    ],
  },
  { label: "智能评估与预警", icon: <AssessmentIcon />, children: [
      { label: "智能评估", page: "inteligence-evaluation" },
      { label: "预警中心", page: "alert-center" },
    
    ]},
  { label: "模型评估与可视化评估  ", icon: <PeopleIcon /> ,children: [
      { label: "干系人自评", page: "self-evaluation" },
      { label: "专家评估", page: "expert-evaluation" },
      { label: "企业总评", page:"enterprise-evaluation" },
      { label:"重点工程与项目管理",page: "project-mgr"},
      { label:"领导驾驶舱",page: "leader-dashboard"}
    
    ],},

  { label: "企业数字化能力知识", icon: <SettingsIcon />,children: [
      { label: "知识库管理", page: "knowledge-lib-mgr" },
    
    ] },
];

export default function App() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
  const [activePage, setActivePage] = useState("dashboard");

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const handleClick = (label: string) => {
   
    setOpenMenus((prev) => ({
      ...prev,
      [label]: !prev[label],
    }));
  };

  const drawer = (
    <Box sx={{ width: drawerWidth, height: "100%", bgcolor: "#1E2A4B", color: "#fff", p: 2 }}>
      <Typography variant="h6" sx={{ mb: 3 }}>
        企业级数字化能力评估平台
      </Typography>

      <List component="nav">
        {menuData.map(({ label, icon, children }) => {
          const isOpen = openMenus[label] || false;
          return (
            <Box key={label}>
              <ListItemButton
                onClick={() => {
                  children ? handleClick(label) : null
                  if(label === "模型管理") setActivePage("model-editor")
                  else if( label === "智能化目标设定") setActivePage("target-setting")
                  else if(label === "评估数据采集") setActivePage("data-source-control")
                  else if(label === "智能评估生成" ) setActivePage("inteligence-evaluation")
                  else if(label === "专家评估") setActivePage("expert-evaluation")
                  else if(label === "干系人自评") setActivePage("self-evaluation")
                  else if(label === "重点工程与项目管理") setActivePage("project-mgr")
                  else if(label === "预警中心") setActivePage("alert-center")
                  else if(label === "领导驾驶仓") setActivePage("leader-dashboard")
                  else if(label === "知识库管理") setActivePage("knowlege-lib-mgr")
                  else if(label === "企业总评" ) setActivePage("enterprise-evaluation")
                  else if(label === "评估审核与归档") setActivePage("evaluation-review")
                }}
                sx={{ color: "#fff" }}
              >
                <ListItemIcon sx={{ color: "#8AB4F8" }}>{icon}</ListItemIcon>
                <ListItemText primary={label} />
                {children ? isOpen ? <ExpandLess /> : <ExpandMore /> : null}
              </ListItemButton>

              {children && (
                <Collapse in={isOpen} timeout="auto" unmountOnExit>
                  <List component="div" disablePadding>
                    {children.map((child) => (
                      <ListItemButton
                        key={child.label}
                        sx={{ pl: 4, color: "#B0C4DE" }}
                        onClick={() => setActivePage(child.page || "dashboard")}
                      >
                        <ListItemText primary={child.label} />
                      </ListItemButton>
                    ))}
                  </List>
                </Collapse>
              )}
            </Box>
          );
        })}
      </List>
    </Box>
  );

  return (
    <Box sx={{ display: "flex", height: "100vh", bgcolor: "#0F1B3D" }}>
      <CssBaseline />
      <AppBar
        position="fixed"
        sx={{
          width: { sm: `calc(100% - ${drawerWidth}px)` },
          ml: { sm: `${drawerWidth}px` },
          bgcolor: "#1E2A4B",
          boxShadow: "none",
        }}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: "none" } }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
            企业数字化能力评估平台
          </Typography>

          <Box sx={{ position: "relative", mr: 3 }}>
            <InputBase
              placeholder="全局搜索"
              sx={{
                color: "inherit",
                bgcolor: "#283A75",
                borderRadius: 1,
                pl: 2,
                pr: 5,
                height: 32,
                fontSize: 14,
              }}
              startAdornment={<SearchIcon sx={{ ml: 1, mr: 1 }} />}
            />
          </Box>

          <IconButton color="inherit" sx={{ mr: 2 }}>
            <Badge badgeContent={3} color="error">
              <NotificationsIcon />
            </Badge>
          </IconButton>

           <AccountMenu onNavigate={(page) => setActivePage(page)} />
        </Toolbar>
      </AppBar>

      <Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}>
        <Drawer
          variant="temporary"
          open={mobileOpen}
          onClose={handleDrawerToggle}
          ModalProps={{ keepMounted: true }}
          sx={{
            display: { xs: "block", sm: "none" },
            "& .MuiDrawer-paper": { width: drawerWidth, bgcolor: "#1E2A4B" },
          }}
        >
          {drawer}
        </Drawer>

        <Drawer
          variant="permanent"
          open
          sx={{
            display: { xs: "none", sm: "block" },
            "& .MuiDrawer-paper": {
              width: drawerWidth,
              bgcolor: "#1E2A4B",
              borderRight: "none",
            },
          }}
        >
          {drawer}
        </Drawer>
      </Box>

      <Box
        component="main"
        sx={{
          flexGrow: 1,
          p: 3,
          mt: 8,
          bgcolor: "#0F1B3D",
          color: "#fff",
          overflowY: "auto",
        }}
      >
        <Breadcrumbs aria-label="breadcrumb" sx={{ mb: 2, color: "#8AB4F8" }}>
          <Link underline="hover" color="inherit" href="#">
            首页
          </Link>
          <Typography color="common.white">
             {titleMap[activePage] || ""}
          </Typography>
        </Breadcrumbs>

        {activePage === "dashboard" && (
          <Box sx={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
            <Paper
              sx={{
                flex: 1,
                minWidth: 300,
                height: 300,
                bgcolor: "#1E2A4B",
                border: "1px solid #3C5A99",
                color: "#8AB4F8",
                p: 2,
              }}
            >
              <RadarChart />
            </Paper>

            <Paper
              sx={{
                flex: 1,
                minWidth: 300,
                height: 300,
                bgcolor: "#1E2A4B",
                border: "1px solid #3C5A99",
                color: "#8AB4F8",
                p: 2,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              重点工程进展情况
            </Paper>
          </Box>
        )}

        
        {activePage === "model-mantain" && <ModelMantain />}
        {activePage === "model-editor" && <IndustryModelEditor />}
        {activePage === "data-source-control" && <DataSourceConfigPage />}
        {activePage === "inteligence-evaluation" && <InteligenceEvaluation />}
        {activePage === "expert-evaluation" && <ExpertEvaluation /> }
        {activePage === "self-evaluation" && <SelfEvaluation /> }
        {activePage === "project-mgr" && <ProjectMgr />}
        {activePage === "user-mgr" && <UserMgr />}
        {activePage === "survey-feedback" && <SurveyStatistics />}
        {activePage === "alert-center" && <AlertCenter />}
        {activePage === "leader-dashboard" && <LeaderDashBoard />}
        {activePage === "knowledge-lib-mgr" && <KnowledgeManagement />}
        {activePage === "enterprise-evaluation" && <EnterpriseEvaluation/>}
        {activePage === "target-setting" && <TargetManagementPage/>}
        {activePage === "evaluation-review" && <EvaluationReview/>}

      </Box>
    </Box>
  );
}
